<template>
  <div class="navMenu">
    <label v-for="navMenu in navMenus">
      <div v-if="navMenu.linkUrl!=null&&navMenu.linkUrl!=''">
        <router-link :to="navMenu.linkUrl">
          <el-menu-item v-if="navMenu.list==null"
                        :key="navMenu.id" :data="navMenu" :index="navMenu.name">
            <i :class="navMenu.imageUrl"></i>
            <span slot="title">{{ navMenu.name }}</span>
          </el-menu-item>
        </router-link>
      </div>

      <div v-if="navMenu.linkUrl==null||navMenu.linkUrl==''">
        <el-menu-item v-if="navMenu.list==null"
                      :key="navMenu.id" :data="navMenu" :index="navMenu.name">

          <i :class="navMenu.imageUrl"></i>
          <span slot="title">{{ navMenu.name }}</span>
        </el-menu-item>
      </div>

      <div v-if="navMenu.linkUrl!=null&&navMenu.linkUrl!=''">
        <router-link :to="navMenu.linkUrl">
          <el-submenu v-if="navMenu.list!==null&&navMenu.list!==''"
                      :key="navMenu.id" :data="navMenu" :index="navMenu.name">
            <template slot="title">
              <i :class="navMenu.imageUrl"></i>

              <span> {{ navMenu.name }}</span>

            </template>
            <NavMenu :navMenus="navMenu.list"></NavMenu>
          </el-submenu>
        </router-link>
      </div>

      <div v-if="navMenu.linkUrl==null||navMenu.linkUrl==''">
        <el-submenu v-if="navMenu.list!==null&&navMenu.list!==''"
                    :key="navMenu.id" :data="navMenu" :index="navMenu.name">
          <template slot="title">
            <i :class="navMenu.imageUrl"></i>

            <span> {{ navMenu.name }}</span>

          </template>
          <NavMenu :navMenus="navMenu.list"></NavMenu>
        </el-submenu>
      </div>
    </label>

  </div>
</template>

<script>
export default {
  name: 'NavMenu',
  props: ['navMenus'],
  data() {
    return {}
  },
  methods: {}
}
</script>

<style scoped>
a {
  text-decoration: none
}
</style>


